import React ,{useState}from 'react';
import { Space, Table, Tag, Button, Modal,message, Popconfirm,Input, Select  } from 'antd';
import {useSelector,useDispatch} from "react-redux"
import { async_del,async_search } from '../../store/crimsSlice';
import dayjs from 'dayjs';
import Myfrom from './myfrom';
const Bu = () => {
    let obj=useSelector(store=>store.todos)
    let dispatch=useDispatch()
    let [current,setcurrent]=useState(1)
    let [pageSize,setpageSize]=useState(3)
    let [total,settotal]=useState(obj.list.length)
    let [title,settitle]=useState('添加')
    let [itemObj,setItem]=useState({})
     const [isModalOpen, setIsModalOpen] = useState(false);
     let [titles,setitles]=useState('')
     let [state,setstate]=useState(undefined)
     const search=()=>{
        let parsms={
            titles:titles.trim(),
            state:state
        }
        dispatch(async_search(parsms))
     }
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
    const columns = [
  {
    title: '岗位编号',
    dataIndex: 'code',
  
  },
  {
    title: '上级部门',
    dataIndex: 'name',

  },
  {
    title: '部门名称',
    dataIndex: 'titles',

  },
  {
    title: '排序',

    dataIndex: 'sort',

  },
    {
    title: '状态',

    dataIndex: 'state',
    render:(state)=>{
        return <Tag color={state?'blue':'red'}>{state?'正常':'异常'}</Tag>
    }

  },
    {
    title: '时间',

    dataIndex: 'time',
    render:(time)=>{
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
    }

  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <span className='bian' onClick={()=>{
               showModal()
       settitle('编辑')
       setItem(record)
        }}>编辑</span>
          <Popconfirm
    title="Delete the task"
    description="确认删除吗"
    onConfirm={()=>{
     dispatch(async_del(record.id))
    }}
    onCancel={()=>{
   
    }}
    okText="确定"
    cancelText="取消"
  >
  <span className='bian'>删除</span>
  </Popconfirm>

      
      </Space>
    ),
  },
];
    return <div>
        <div>
           部门名称: <Input placeholder="请输入部门名称" style={{width:300}} className='inp' value={titles} onChange={(e)=>{
            setitles(e.target.value)
           }}/>
           状态   <Select
value={state}
placeholder="状态"
      style={{ width: 250 }}
      onChange={(value)=>setstate(value)}
      options={[
        { value: true, label: '正常' },
        { value: false, label: '异常' },
      
      ]}
    />
    <Button onClick={search} type="primary" className='btn'>搜索</Button>
        </div>
     <Tag color='blue'  onClick={()=>{
        showModal()
        settitle('添加')
           setItem({})
     }} className='tag'>新增</Tag>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
      <Myfrom title={title} itemObj={itemObj}     onCancel={handleCancel} key={new Date().getTime()}></Myfrom>
      </Modal>
        <Table columns={columns} dataSource={obj.list} rowKey={"id"}
        pagination={{

            current,
            pageSize,
            total,
            pageSizeOptions:[3,4,5],
            showQuickJumper:true,
            showSizeChanger:true,
            onChange:(page,pageSize)=>{
                setcurrent(page)
                setpageSize(pageSize)
            }
        }}
        />;
    </div>
}

export default Bu;